import React, { Component } from 'react';
import router from 'umi/router';
import withRouter from 'umi/withRouter';
import { Affix } from 'antd';
import { connect } from 'dva';
import styles from '@/components/BasicHeader/index.less';

import memoryUtils from '@/utils/memoryUtils';


class SubsystemHeader extends Component {

  constructor(props) {
    super(props);
    const { location } = this.props;
    const url = location.pathname.split("/");
    this.$handle = url[2];
  }

  handleClickMenu = ($module, selectedModuleIndex) => {
    const { dispatch } = this.props;
    dispatch({ type: 'subSystem/selectModule', payload: {selectedModuleIndex}});
  }

  getNavMenus = (subModules, selectedModuleIndex) => {
    const active = {background: 'url("'+require('@/assets/images/a-dashboard-header-menu2.png')+'") no-repeat center center', backgroundSize:'100%'};
    const list = subModules.map((subModule, index)=>{
      if(index===selectedModuleIndex) {
        return (
          <li className={styles.navMenu} style={active} key={index} onClick={()=>this.handleClickMenu(subModule.$handle, index)}>
            {subModule.title}
          </li>
        )
      } else {
        return (
          <li className={styles.navMenu} key={index} onClick={()=>this.handleClickMenu(subModule.$handle, index)}>
            {subModule.title}
          </li>
        )
      }
    });
    list.push(<li className={`${styles.navMenu} ''`} key={subModules.length} onClick={()=>router.replace('/')}>返回首页</li>)
    return list;
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'subSystem/fetch', payload: {subSystemOrd: 'station:|h:'+this.$handle}});
  }

  render() {
    const { title, subModules, loading, selectedModuleIndex } = this.props;
    // if(loading) {
    //   return false;
    // }
    // const menu = (
    //   <Menu>
    //     <Menu.Item>
    //       <span onClick={()=>{window.open('/logout', '_self')}}>退出</span>
    //     </Menu.Item>
    //   </Menu>
    // );
    return (
      <Affix offsetTop={0}>
        <div className={styles.dashboardHeader}>
          <div className={styles.header}>
            <div></div>
            <div className={styles.title}><span onClick={()=>router.replace('/')}>{title}</span></div>
            <div className={styles.logout}>
              <div>
                {memoryUtils.user.username},
                <span onClick={()=>{window.open('/logout', '_self');}}> 退出</span>
              </div>
            </div>
          </div>
          <img className={styles.line} alt='dashboard-header-line'
               src={require('@/assets/images/a-dashboard-horizontal-line.png')}/>
          <ul className={styles.navMenus}>
            {!loading?this.getNavMenus(subModules, selectedModuleIndex):''}
          </ul>
        </div>
      </Affix>
    );
  }
}


export default connect(({ subSystem, loading }) => ({
  ...subSystem,
  loading: loading.effects['subSystem/fetch'],
}))(withRouter(SubsystemHeader));
